<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #app{
            position: relative;
        }
        table{
            margin: 50px auto;
            border: 2px solid #ddd;
            border-collapse: collapse;
        }
        td,th{
            border: 2px solid #ddd;
            padding: 20px;
            text-align: center;
        }
        th{
            background: #eee;
        }
        .search{
            width: 100%;
            height: 40px;
            text-align: center;
        }
        .search input,
        .search button{
            height: 40px;
            line-height: 40px;
            margin-top: 30px;
        }
        .search button{
            height: 43px;
            width: 60px;
        }
        .pages{
            margin: 0 auto;
            width: 480px;
        }
        .pages select,
        .pages a{
            margin-left: 30px;
        }
        .pages a{
            text-decoration: none;
        }
        .addEmp{
            position: absolute;
            right: 160px;
            top: 40px;
        }
        .addEmp #addUser{
            width: 90px;
            height: 35px;
        }
        table tbody img{

            height: 40px;
            width: auto;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="search">
        <input type="text" placeholder="请输入要查找的姓名" id="key">
        <button class="searchBT">查找</button>
    </div>
    <div class="addEmp">
        <button id="addUser">添加用户</button>
    </div>
    <table id="table">
        <tr>
            <th>用户编号</th>
            <th>用户名</th>
            <th>用户密码</th>
            <th>用户角色</th>
            <th>操作</th>
            <th>
                <input type="checkbox" id="cheall">全选
                <input type="button" id="delAll" onclick="del()" value="删除选中">
            </th>
        </tr>
        <tbody id="tbody">
        </tbody>
    </table>
    <div class="pages">
        <select id="pageSize">
            <option value="5">每页5条</option>
            <option value="6">每页6条</option>
            <option value="7">每页7条</option>
        </select>
        <a href="javascript:void(0)" id="first" class="page">首页</a>
        <a href="javascript:void(0)" id="up" class="page">上一页</a>
        <a href="javascript:void(0)" id="next" class="page">下一页</a>
        <a href="javascript:void(0)" id="last" class="page">最后一页</a>
    </div>
</div>
<script>
    let currentPage = 1
    let pageSize = 5
    let total
    let ch;
    let cheAll = $("#cheall")
    //点击事件，点击全选，下面的复选框也选上
    cheAll.click(function () {
        let isChecked = cheAll.prop("checked");
        $(".ch").prop("checked", isChecked);
    });
    //判断下面的小复选框是否全部选择，并影响大复选框
    function getList(){
        $.ajax({
            type:"post",
            url:"/user/getUsersByPage",
            data:{
                username:$("#key").val(),
                currentPage:currentPage || 1,
                pageSize:pageSize || 5,
                },
            success:function (res){
                currentPage = res.pageNum
                pageSize = res.pageSize
                total = res.pages
                let list = res.list
                let tbody = $("#tbody");
                tbody.find("tr").remove();
                for (let i = 0; i < list.length; i++) {
                    let row = $("<tr></tr>");
                    row.append($("<td></td>").text(list[i].id));
                    row.append($("<td></td>").text(list[i].username));
                    row.append($("<td></td>").text(list[i].password));
                    row.append($("<td></td>").text(list[i].role.rolename));
                    row.append($("<td></td>")
                        .append(
                            $("<button>修改</button>").css("margin-right","10px")
                                .attr("onclick", "update(" + JSON.stringify(list[i]) + ")"),
                            $("<button>删除</button>")
                                .attr("onclick", "del(" + list[i].id + ")"),));
                    row.append($("<td></td>")
                        .append($("<input type='checkbox' class='ch'>").val(list[i].id)));
                    tbody.append(row);
                }
                ch=$(".ch")
                //为每个小复选框添加一个change事件监听器
                ch.change(function () {
                    cheAll.prop("indeterminate",$(".ch:checked").length>0 && ch.length != $(".ch:checked").length)
                    cheAll.prop("checked", ch.length === $(".ch:checked").length);
                });
            }
        })
    }
    $("#pageSize").click(function (){
        pageSize = $(this).val()
        getList();
    })
    $(".page").click(function (){
        let num = $(this).attr("id");
        if(num == "first"){
            currentPage = 1
            getList();
        } else if (num == "up" && currentPage!=1 ){
            currentPage--;
            getList();
        }else if(num == "next" && total>currentPage){
            currentPage++;
            getList();
        } else if(num == "last"){
            currentPage = total
            getList();
        }
    })
    function update(user){
        $.ajax({
            type: "post",
            url: "/user/editUser",
            contentType:"application/json",
            data: JSON.stringify(user),
            success:function (res){
                if (res=="true"){
                    location.href="editUser.html"
                } else {
                    alert("修改失败")
                }
            }
        })
    }
    $("#addUser").click(function (){
        location.href = 'addUser.html'
    })
    $(".searchBT").click(function (){
        getList()
    })
    function del(eid){
        let selectedIds = [];
        selectedIds.push(eid)
        $(".ch:checked").each(function () {
            selectedIds.push($(this).val());
        });
        if (selectedIds.length === 0) {
            alert("请至少选择一个项");
            return;
        }
        if(confirm("确认要删除吗？")) {
            $.ajax({
                type: "post",
                url: "/user/deleteUsers",
                contentType: "application/json",
                data:JSON.stringify(selectedIds),
                success: function (res) {
                    if (res === "true") {
                        getList();
                    } else {
                        alert("删除失败");
                    }
                }
            });
        }
    }
    getList()
</script>
</body>
</html>
